<%--
  Created by IntelliJ IDEA.
  User: 余沣
  Date: 2021/6/23
  Time: 15:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>车票</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <%--    引入layui样式--%>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css">

    <%--    1. 引入bootstrap.css--%>
    <link rel="stylesheet" href="/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <%--    2. 引入自定义的css文件--%>
    <link rel="stylesheet" href="/css/nav.css">

    <style>
        .main {
            margin-left: 50px;
            margin-right: 50px;
        }
        body{
            background: #f1f1f1;
        }
        .cart_img img {
            width: 65px;
            height: 65px;
        }
        .search_head {
            background-color: #f1f1f1;
            margin-top: 10px;
            height: 30px;
            text-align: center;
            font-weight: bold;
        }
        .one_line {
            background-color: white;
            height: 100px;
            margin-top: 10px;
            text-align: center;
        }
        .flight_name {
            line-height: 80px;
            font-size: x-large;
            font-weight: bold;
            text-align: center;
        }
        .search_form {
            background-color: white;
            margin-top: 50px;
            height: 90px;
        }
    </style>

</head>
<body class="main">
<%@ include file="../common/nav.jsp"%>

<div class="search_head" id="search_head">
    <div class="col-sm-12">
        <button class="col-sm-3 btn btn-primary">车次信息</button>
        <button class="col-sm-3 btn btn-success">出发信息</button>
        <button class="col-sm-3 btn btn-danger">到达信息</button>
        <button class="col-sm-3 btn btn-warning">价格</button>
    </div>
</div>
<div class="search_form" id="searchForm">
    <%--        定义row--%>
    <div class="row">
    <c:forEach items="${railticketList}" var="c" varStatus="vs">
        <div class="one_line">
            <div class="col-sm-12">
                <div class="col-sm-3">
                    <p class="flight_name">${c.trainNum}</p>
                </div>
                <div class="col-sm-3">
                  <p style="padding: 10px">
                      <span style="font-size: xx-large">${c.startTime}</span>
                    <br>
                          ${c.departureSta}
                  </p>
                </div>
                <div class="col-sm-3">
                  <p style="padding: 10px">
                      <span style="font-size: xx-large">${c.reachTime}</span>
                    <br>
                          ${c.terminalSta}
                  </p>
                </div>
                <div class="col-sm-3">
                    <p>
                        <sup>￥</sup>
                        <span class="flight_name" style="color: #ff6600;font-size: xx-large;">${c.price}</span>
                        <button onclick="add_train(${c.id})" class="btn btn-sm btn-warning">订票</button>
                    </p>
                </div>
            </div>
        </div>
    </c:forEach>
    </div>
</div>


<script>
    // 搜索按钮完成的功能
    function search_name(){
        //1. 获取搜索的文本框中输入的数据
        let search_input_value = document.getElementById("search_input").value;
        //2. 发送参数到后台
        //window.localtion='url?参数名1=参数值2&参数名2=参数值2&参数名3=参数值4'
        window.location='/railticket/index?name='+search_input_value;


    }
    function add_train(cid) {
        layer.confirm('确认订票吗?', function (index) {
            //需要将产品的id发送到后端
            //1. window.location='url?key1=value1&key2=value2'
            //2. ajax方式 - 传送的是json数据 - {key:value,key2:value2}
            $.get('/train/add', {id: cid}, function (data) {
                //data - 是后端返回过来的json数据
                console.log(data);
                if (data.code == "200") {
                    //alert("添加购物成功!");
                    layer.msg('购票成功', {icon: 1});
                } else {
                    alert("购票失败!");
                }
                layer.close(index);
            });
        });
    }

</script>
<%--    引入layui - js--%>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<%--    2. 先引入jquery.min.js--%>
<script type="text/javascript" src="/plugins/jquery/jquery.min.js"></script>
<%--    3. 引入bootstrap.js文件--%>
<script type="text/javascript" src="/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</body>
</html>
